<template>
    <div>
        <h1>一个人的信息：</h1>
        <h1>姓名：{{person.name}}</h1>
        <h1>年龄：{{person.age}}</h1>
        <button @click="test">测试触发一下Demo组件的hello 事件</button>
    </div>
</template>

<script>
    import { reactive } from 'vue';
    export default {
        name: 'Demo',
        beforeCreate() {
            console.log('-----------beforeCreate执行了----------');
        },
        props: ['msg', 'school'], // 获取到父组件传递的数据
        emits: ['hello'], // 获取到父组件给子组件绑定的自定义事件
        // 参数一：是父组件传递给子组件的参数
        // 参数二：是上下文Object对象
        setup(props, conetxt) {
            console.log("props：", props);

            // attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于this.$attrs。
            console.log("conetxt.attr", conetxt.attrs);
            // slots: 收到的插槽内容, 相当于this.$slots。
            console.log("conetxt.slots", conetxt.slots);
            // emit: 分发自定义事件的函数, 相当于this.$emit，触发自定义事件的
            console.log("conetxt.emit", conetxt.emit);

            // setup 里面的this 是undefined，说明setup里面是无法使用this，使用的话就会报错
            console.log('-----------setup执行了----------', this);
            // 数据
            const person = reactive({
                name: '张三',
                age: 18
            });

            // 使用conetxt的emit 进行触发事件，触发自定义事件练习
            function test() {
                conetxt.emit('hello', 666);
            }

            // 返回一个对象（常用）
            return {
                person,
                test,
            }
        }
    }
</script>

<style>

</style>